<template>
	<view class="self-check-container">
		<!-- 月份选择器 -->
		<view class="month-selector">
			<picker mode="date" fields="month" :value="currentMonth" @change="handleMonthChange">
				<view class="selected-month">
					<text class="month-text">{{ formatDisplayMonth(currentMonth) }}</text>
					<text class="arrow-down">▼</text>
				</view>
			</picker>
		</view>

		<!-- 自检列表 -->
		<view class="inspection-list">
			<view class="list-header">
				<text class="header-date">日期</text>
				<text class="header-status">状态</text>
				<text class="header-action">操作</text>
			</view>

			<scroll-view scroll-y class="list-content" :show-scrollbar="false">
				<view v-for="item in inspectionList" :key="item.siDate" class="list-item">
					<text class="item-date">{{ formatDateTime(item.siDate) }}</text>
					<view class="item-status" :class="item.siStatus ? 'status-uploaded' : 'status-pending'">
						<text class="status-dot"></text>
						<text class="status-text">{{ item.siStatus ? '已上传' : '未上传' }}</text>
					</view>
					<view class="item-action">
						<button class="view-btn" @click="handleView(item)">查看</button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onPageShow } from '@dcloudio/uni-app'
import { request } from '../../utils/request'
import { selfCheckApi } from '../../utils/api'

// 当前选择的月份
const currentMonth = ref(formatYearMonth(new Date()))

// 自检列表数据
const inspectionList = ref([])

// 格式化年月
function formatYearMonth(date) {
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	return `${year}-${month}`
}

// 格式化日期时间
function formatDateTime(dateStr) {
	if (!dateStr) return ''
	// Replace space with 'T' to make it compatible with iOS
	const date = new Date(dateStr.replace(' ', 'T'))
	const year = date.getFullYear()
	const month = String(date.getMonth() + 1).padStart(2, '0')
	const day = String(date.getDate()).padStart(2, '0')
	const hours = String(date.getHours()).padStart(2, '0')
	const minutes = String(date.getMinutes()).padStart(2, '0')
	return `${year}-${month}-${day} ${hours}:${minutes}`
}

// 处理月份选择变化
function handleMonthChange(e) {
	currentMonth.value = e.detail.value
	fetchInspectionList()
}

// 获取自检列表数据
async function fetchInspectionList() {
	try {
		// 显示加载中
		uni.showLoading({
			title: '加载中...'
		})

		// 获取年月
		const [year, month] = currentMonth.value.split('-')
		
		// 调用接口获取数据
		const res = await selfCheckApi.getSelfCheckList(year, month, 4)

		// 处理返回数据
		if (res.code === 200) {
			inspectionList.value = res.data
			console.log(inspectionList.value)
		} else {
			uni.showToast({
				title: res.message || '获取数据失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('获取自检列表失败:', error)
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		})
	} finally {
		// 隐藏加载中
		uni.hideLoading()	
	}
}

// 查看详情
function handleView(item) {
	console.log('查看详情:', item)
	// 这里可以添加跳转到详情页的逻辑
	uni.navigateTo({
		url: `form?id=${item.siId}`
	})
}

// 添加新的格式化显示月份的函数
function formatDisplayMonth(dateStr) {
	const [year, month] = dateStr.split('-')
	return `${year}年${month}月`
}

// 页面加载时获取数据
onMounted(() => {
	// 初始化时获取一次数据
	fetchInspectionList()
})

// 页面显示时重新获取数据
onPageShow(() => {
	fetchInspectionList()
})
</script>

<style>
.self-check-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f7f8fa;
}

.month-selector {
	background: linear-gradient(135deg, #c70209, #e54d4d);
	padding: 40rpx 30rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.selected-month {
	display: flex;
	align-items: center;
	justify-content: center;
}

.month-text {
	color: #ffffff;
	font-size: 36rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
}

.arrow-down {
	margin-left: 12rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
}

.inspection-list {
	flex: 1;
	margin: 30rpx;
	background-color: #ffffff;
	border-radius: 16rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

.list-header {
	display: flex;
	padding: 30rpx;
	background-color: #fafafa;
	border-bottom: 2rpx solid #f0f0f0;
}

.header-date {
	flex: 2;
	font-size: 28rpx;
	color: #666;
	font-weight: 500;
}

.header-status {
	flex: 1;
	font-size: 28rpx;
	color: #666;
	text-align: center;
	font-weight: 500;
}

.header-action {
	flex: 1;
	font-size: 28rpx;
	color: #666;
	text-align: center;
	font-weight: 500;
}

.list-content {
	height: calc(100vh - 280rpx);
}

.list-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
	transition: all 0.3s ease;
}

.list-item:active {
	background-color: #f9f9f9;
}

.item-date {
	flex: 2;
	font-size: 28rpx;
	color: #333;
}

.item-status {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8rpx;
}

.status-dot {
	width: 12rpx;
	height: 12rpx;
	border-radius: 50%;
}

.status-uploaded {
	color: #67c23a;
}

.status-uploaded .status-dot {
	background-color: #67c23a;
}

.status-pending {
	color: #e6a23c;
}

.status-pending .status-dot {
	background-color: #e6a23c;
}

.status-text {
	font-size: 26rpx;
}

.item-action {
	flex: 1;
	text-align: center;
}

.view-btn {
	font-size: 24rpx;
	padding: 12rpx 32rpx;
	background: linear-gradient(135deg, #409eff, #64b5ff);
	color: #ffffff;
	border-radius: 30rpx;
	border: none;
	line-height: 1.5;
	box-shadow: 0 2rpx 8rpx rgba(64, 158, 255, 0.2);
	transition: all 0.3s ease;
}

.view-btn:active {
	transform: scale(0.95);
	box-shadow: 0 2rpx 4rpx rgba(64, 158, 255, 0.1);
}
</style>
